<template>
  <div class="container">
    <div class="p1 border-b">
      <div class="flex">
        <div class="search-input-area">          
          <input type="search" @focus="showSearchHistories" @blur="searchmode=false" @keyup.enter="doSearch" v-model="words" class="search-input" placeholder="搜索关键字">
        </div>
        <div class="search-bth" @click="doSearch">搜索</div>
      </div>
    </div>
    <div class="p1-holder"></div>
    <template v-show="searchmode">
    <div class="history-area fz22" v-if="histories && histories.length">
      <div class="flex">
        <div class="flex-con txt333">
          最近搜索
        </div>
        <div class="clearbtn">
          清空
        </div>
      </div>
      <div class="search-history clearfix">
        <div class="search-item" v-for="item in histories" :key="item">{{item}}</div>
      </div>
    </div>
    </template>
    <div class="goods-list" v-show="!searchmode">
        <xd-datalist ref="datalist" url="/api/goods_list" :autoload="false">
        <div class="box1-wrap" slot-scope="scope">
          <div class="box1" v-for="(item,index) in scope.list" :key="index" @click="showGoodsDetail(item.id)">
              <xd-img :src="item.cover|absUrl" alt="" class="box1-cover"/>
              <div class="goods-tag" v-if="item.tag" :class="'goods-'+item.tagName">{{item.tag}}</div>
              <div class="goods-info">
                  <div class="goods-title one-line">
                      {{item.title}}
                  </div>
                  <div class="goods-points-area">
              <span class="goods-points" v-if="item.points>0">{{item.points}}积分</span><template v-if="item.points>0 && item.price>0">+</template><span class="goods-money" v-if="item.price>0">{{item.price}}元</span>
            </div>
            <div class="huiyuan-goods-points-area" v-if="item.sourcePoints!=null">
              会员价:<template v-if="item.sourcePoints>0">{{item.sourcePoints}}积分</template><template v-if="item.sourcePoints>0 && item.sourcePrice>0 "> + </template><template v-if="item.sourcePrice>0">{{item.sourcePrice}}元</template>
            </div>
              </div>
          </div>
          </div>
          <template slot="data-empty">
              <div class="empty-area">
              <img src="../../assets/icons/shop/emptydata.png" alt="" class="empty-img"/>
              <div class="empty-txt">
                  暂未找到相关商品~
              </div>
          </div>    
          </template>
          
      </xd-datalist>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      histories: [],
      words: "",
      searchmode:true
    };
  },
  created(){
    
  },
  methods: {
    doSearch() {
      this.$refs.datalist.addParam("title", this.words.trim()).refresh();
      this.searchmode = false;
    },
    showSearchHistories(){        
        this.searchmode= true;
    },
    showGoodsDetail(id){
        this.$router.push('/goodsdetail?id='+id)
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-area {
  font-size: 0.3467rem;
  padding-top: 1.3067rem;
  color: #333333;
  text-align: center;
  .empty-img {
    width: 3rem;
    height: 2rem;
  }
  .empty-txt {
    margin-top: 0.68rem;
  }
}

.goods-points-area {
  color: #999;
  font-size: 0.373rem;
  color: #005a1a;
}
.huiyuan-goods-points-area {
  font-size: 0.32rem;
  padding-top: 0.3rem;
  text-decoration: line-through;
  color: #999;
}
.p1 {
  padding: 0.3733rem 0.4267rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  .search-input-area {
    width: 7.7067rem;
    .search-input {
      width: 7.3333rem;
      display: block;
      height: 0.8533rem;
      line-height: 0.8533rem;
      background-color: #ebebeb;
      border-radius: 0.4267rem;
    }
  }
}
.p1-holder {
  height: 1.5733rem;
}

.history-area {
  background-color: #fff;
  padding: 0.3333rem 0.4rem 0.2rem 0.4rem;
}

.clearbtn {
  color: #e82f24;
}

.search-history {
  padding-top: 0.36rem;
  font-size: 0.32rem;
  color: #333333;

  .search-item {
    float: left;
    height: 0.7733rem;
    line-height: 0.7733rem;
    background-color: #e5e5e5;
    margin-bottom: 0.2533rem;
    border-radius: 0.0533rem;
    padding: 0 0.2667rem;
    margin-right: 0.28rem;
  }
}
.search-input {
  font-size: 0.2933rem;
  border: none;
  -webkit-appearance: none;
  outline: none;
  background-position: 0.3867rem 0.2933rem;
  background-image: url("../../assets/icons/shop/searchicon@2x.png");
  background-size: 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-left: 0.8rem;
  padding-right: 0.4rem;
  &::-webkit-input-placeholder {
    color: #b2b2b2;
  }
}
.search-bth {
  font-size: 0.3733rem;
  width: 1.4667rem;
  height: 0.8533rem;
  line-height: 0.8533rem;
  border-radius: 7px;
  background-image: url("../../assets/icons/shop/searchbtn@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
}

.box1-wrap {
  padding: 0.4rem 0.4rem;
  overflow: hidden;
}
.box1 {
  width: 4.52rem;
  margin-right: 0.16rem;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-bottom: 0.4533rem;
}
.box1:nth-child(2n) {
  margin-right: 0;
}
.box1-cover {
  width: 4.52rem;
  height: 4.5067rem;
}

.goods-tag {
  padding: 0 0.2667rem;
  height: 0.6667rem;
  line-height: 0.6667rem;
  font-size: 0.3733rem;
  color: #fff;
  background-color: #ff2a2a;
  border-radius: 0.0667rem;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.goods-tj {
  background-color: #ff2a2a;
}
.goods-info {
  padding-top: 0.3733rem;
  line-height: 1;
  .goods-title {
    font-size: 0.3467rem;
    color: #17402a;
    padding-bottom: 0.2267rem;
  }
  .goods-points {
    font-size: 0.3733rem;
    color: #ff2a2a;
  }
  .goods-money {
    font-size: 0.3733rem;
    color: #005a1a;
  }
}
.goods-new {
  background-color: #028c3e;
}
.goods-pfzf {
  background-color: #ff9517;
}
</style>
